<template>
	<view class="content">
		<view class='header'>
			<view class='person'>
				<!-- 基本资料 -->
				<view class="info">
					<view class="avatar">
						<image :src="business.avatar_text ? business.avatar_text : '/static/logo.png'"></image>
					</view>

					<view class="base">
						<view class="nickname">{{ business.nickname ? business.nickname : "默认用户" }}</view>
						<view class="desc">{{ business.region_text ? business.region_text : "未知" }}</view>
					</view>
				</view>

				<!-- 宫格布局 -->
				<view class="grid">
					<u-grid :border="true">
						<u-grid-item>
							<u--text color="#fff" text="提问" align="center"></u--text>
							<u--text color="#fff" :text="business.postNum" align="center"></u--text>
						</u-grid-item>
						<u-grid-item>
							<u--text color="#fff" text="回答" align="center"></u--text>
							<u--text color="#fff" :text="business.commentNum" align="center"></u--text>
						</u-grid-item>
						<u-grid-item>
							<u--text color="#fff" text="收藏" align="center"></u--text>
							<u--text color="#fff" :text="business.collectNum" align="center"></u--text>
						</u-grid-item>
					</u-grid>
				</view>

				<!-- 按钮 -->
				<view class="btnlist" v-if="busid && busid != storageBusiness.id">
					<view class="btn">
						<u-button type="success" icon="man-add" :text="isConcern ? '已关注' : '关注'"
							@click="concern"></u-button>
					</view>
					<view class="btn">
						<u-button type="warning" icon="more-circle" text="发私信" @click="messageShow = true"></u-button>
					</view>
				</view>
			</view>
			<view class='nav'>
				<u-sticky bgColor="#fff" style="width: 100%;">
					<u-tabs itemStyle="width:100px;height:44px" :list="cateList" @click="click"></u-tabs>
				</u-sticky>
			</view>
		</view>

		<view class="list">
			<view v-if="postList.length || commentList.length || collectList.length" class="list">
				<scroll-view style="height: 25rem;" :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true"
					:refresher-triggered="triggered" :refresher-threshold="100" @refresherrefresh="onRefresh"
					@scrolltolower="lower">
					<view v-if="cate == 0">
						<u-swipe-action v-for="(item) in postList" :key="item.id">
							<u-swipe-action-item :options="action" @click="deletePost(item.id)">
								<view class="swipe-action u-border-top u-border-bottom">
									<view class="item">
										<view class="business">
											<view class="avatar">
												<image mode="aspectFit"
													:src="business.avatar_text ? business.avatar_text : '/static/avatar.png'">
												</image>
											</view>
											<view class="author">{{ business.nickname ? business.nickname : "默认用户" }}
											</view>
										</view>

										<view class="info">
											<navigator
												:url="`/pages/post/info?concernid=${item.busid}&postid=${item.id}`"
												class="title">{{ item.title }}</navigator>
											<view class="createtime">{{ item.createtime ? item.createtime.split(" ")[0]
							:
							"未知" }}
											</view>
											<view class="category">分类：{{ item.cate_text }}</view>

											<view class="join">
												<view class="status">{{ item.status_text }}</view>
												<view class="point">￥{{ item.point }}</view>
												<view class="count">{{ item.comment_num }}人参与回复</view>
											</view>
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
					<view class="commentlist" v-else-if="cate == 1">
						<view class="item" v-for="item in commentList" :key="item.id">
							<!-- 基本信息 -->
							<view class="business">
								<!-- 头像 -->
								<view class="avatar">
									<image mode="aspectFit" :src="item.business ? item.business.avatar_text : ''">
									</image>
								</view>
								<!-- 用户 -->
								<view class="base">
									<view class="name">
										<view class="nickname">{{ item.business ? item.business.nickname : '默认用户' }}
										</view>
										<view class="createtime">{{ item.createtime.split(" ")[0] }}</view>
									</view>
									<view class="desc">{{ item.business.region_text.split("/")[0] }}</view>
								</view>
							</view>
							<!-- 详细内容 -->
							<view class="content">{{ item.content }}
							</view>
							<!-- 删除信息 -->
							<view class="accept" v-if="storageBusiness == busid">
								<u-tag text="删除" type="error" plain shape="circle" size="large"
									@click="deleteComment(item.id)"></u-tag>
							</view>
						</view>
					</view>
					<view v-else-if="cate == 2">
						<u-swipe-action v-for="item in collectList" :key="item.id">
							<u-swipe-action-item :options="action" @click="deleteCollect(item.id)">
								<view class="swipe-action u-border-top u-border-bottom">
									<view class="item">
										<view class="business">
											<view class="avatar">
												<image mode="aspectFit"
													:src="item.business.avatar_text ? item.business.avatar_text : '/static/avatar.png'">
												</image>
											</view>
											<view class="author">{{ item.business.nickname }}</view>
										</view>

										<view class="info">
											<navigator
												:url="`/pages/post/info?concernid=${item.post.busid}&postid=${item.post.id}`"
												class="title">{{ item.post.title }}</navigator>
											<view class="createtime">发布时间：{{ item.post.createtime.split(" ")[0] }}
											</view>
											<view class="category">分类：{{ item.post.cate_text }}</view>

											<view class="join">
												<view class="status">{{ item.post.status_text }}</view>
												<view class="point">￥{{ item.post.point }}</view>
												<view class="count">{{ item.post.comment_num }}人参与回复</view>
											</view>
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>

					<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
				</scroll-view>
			</view>
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 弹框组件 -->
		<u-modal :show="show" :title="'提醒'" :content="content" showCancelButton :closeOnClickOverlay="true"
			@cancel="show = false" @close="show = false" @confirm="confirm"></u-modal>

		<!-- 回答弹出层 -->
		<u-popup :show="messageShow" @close="messageShow = false">
			<view class="answer">
				<u-form labelPosition="top" labelWidth="150" :model="message" :rules="rules" ref="answer">
					<!-- 描述 -->
					<u-form-item label="私信内容：" prop="content" ref="content">
						<u--textarea v-model="message.message" placeholder="请输入私信内容"></u--textarea>
					</u-form-item>

					<view class="btn">
						<u-button type="primary" text="发送" formType="submit" @click="submit"></u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			content: '是否确认删除',
			business: {},
			storageBusiness: {},
			busid: 0,
			cateList: [
				{
					name: "我的提问",
					id: 0
				},
				{
					name: "我的回答",
					id: 1
				},
				{
					name: "我的收藏",
					id: 2
				}
			],
			scrollTop: 0,
			triggered: false,
			page: 1,
			limit: 10,
			cate: 0,
			deleteItem: "",
			deleteid: 0,
			postList: [],
			commentList: [],
			collectList: [],
			isConcern: false,
			action: [{
				text: '删除',
				style: {
					backgroundColor: 'rgb(245, 108, 108)',
				}
			}],
			messageShow:false,
			message: {
                message: '',
            },
			rules: {
                message: {
                    type: 'string',
                    required: true,
                    message: '请填写私信内容',
                    trigger: ['blur', 'change']
                },
            },
		}
	},
	onLoad(options) {
		this.storageBusiness = uni.getStorageSync("business") ?? {}
		this.busid = options.busid ?? 0
		if (this.busid && this.busid != this.storageBusiness.id) {
			this.cateList = [
				{
					name: "他的提问",
					id: 0
				},
				{
					name: "他的回答",
					id: 1
				},
				{
					name: "他的收藏",
					id: 2
				}
			]
		}
		this.getData()
		this.onRefresh()
		this.getConcern()
	},
	methods: {
		async confirm() {
			this.show = false
			// 判断删除类型
			let data = {
				busid: this.busid ?? this.business.id,
				id: this.deleteid
			}
			let result;
			if (this.deleteItem == 'post') {
				result = await uni.$u.http.post("/business/deletePost", data)
			} else if (this.deleteItem == 'comment') {
				result = await uni.$u.http.post("/business/deleteComment", data)
			} else {
				result = await uni.$u.http.post("/business/deleteCollect", data)
			}
			if (result.code) {
				this.$refs.notice.show({
					message: result.msg,
					duration: 1000,
					complete: () => {
						this.onRefresh()
					}
				})
			} else {
				this.$refs.notice.show({
					message: result.msg
				})
				return false
			}
		},
		// 请求数据
		async getData() {
			let result = await uni.$u.http.post("/business/business", { busid: this.busid != 0 ? this.busid : this.storageBusiness.id })
			if (result.code) {
				this.business = result.data
				return false
			} else {
				this.$refs.notice.show({
					message: result.msg
				})
				return false
			}
		},
		click(item) {
			this.cate = item.id
			this.postList = []
			this.commentList = []
			this.collectList = []
			this.page = 1
			this.lower()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onRefresh() {
			if (this._freshing) return;
			this._freshing = true;
			this.triggered = true
			this.page = 1;
			this.postList = []
			this.commentList = []
			this.collectList = []
			this.lower()
		},
		async lower(e) {
			// 发送请求
			let data = {
				busid: this.busid != 0 ? this.busid : this.storageBusiness.id,
				page: this.page,
				limit: this.limit,
			}
			if (this.cate == 0) {
				let result = await uni.$u.http.post("/business/post", data)
				if (result.code == 0) {
				} else {
					this.page++
					this.postList.push(...result.data)
					this.triggered = false;
					this._freshing = false;
				}
			} else if (this.cate == 1) {
				let result = await uni.$u.http.post("/business/comment", data)
				if (result.code == 0) {
				} else {
					this.page++
					this.commentList.push(...result.data)
					this.triggered = false;
					this._freshing = false;
				}
			} else {
				let result = await uni.$u.http.post("/business/collect", data)
				if (result.code == 0) {
				} else {
					this.page++
					this.collectList.push(...result.data)
					this.triggered = false;
					this._freshing = false;
				}
			}

		},
		deletePost(id) {
			if (this.busid != this.storageBusiness.id) {
				this.$refs.notice.show({
					message: "无效操作",
					type: "error"
				})
				return false
			}
			this.deleteItem = 'post'
			this.deleteid = id
			this.show = true
		},
		deleteComment(id) {
			this.deleteItem = 'comment'
			this.deleteid = id
			this.show = true
		},
		deleteCollect(id) {
			if (this.busid != this.storageBusiness.id) {
				this.$refs.notice.show({
					message: "无效操作",
					type: "error"
				})
				return false
			}
			this.deleteItem = 'collect'
			this.deleteid = id
			this.show = true
		},
		async concern() {
			let data = {
				busid: this.busid,
				concernid: this.storageBusiness.id
			}
			let result = await uni.$u.http.post("/post/concern", data)
			if (result.code) {
				this.$refs.notice.show({
					type: "success",
					message: result.msg,
					duration: 1000,
					complete: () => {
						this.isConcern = result.data
					}
				})
				return false
			} else {
				this.$refs.notice.show({
					type: 'error',
					message: result.msg,
				})
				return false
			}
		},
		async getConcern() {
			if (!this.busid || this.busid == this.storageBusiness.id) {
				return false
			}
			let data = {
				busid: this.busid,
				concernid: this.storageBusiness.id
			}
			let result = await uni.$u.http.post("/business/getConcern", data)
			if (result.code) {
				this.isConcern = result.data
			}
		},
		async submit(){
			let data = {
				content:this.message.message,
				recipientid:this.busid,
				senderid:this.storageBusiness.id
			}
			this.message.message = ''
			this.messageShow = false
			let result = await uni.$u.http.post("/business/sendMessage",data)
			if(result.code){
				this.$refs.notice.show({
					type:"success",
					message:result.msg
				})
				return false
			}else{
				this.$refs.notice.show({
					type:"error",
					message:result.msg
				})
				return false
			}
		}
	}
}
</script>


<style>
/* 评论列表 */
.commentlist {
	width: 97%;
	margin: 0 auto;
}

.commentlist .item {
	width: 91% !important;
	margin: 0 auto;
	margin-bottom: 5px;
	padding: 15px;
	background: #fff;
	box-shadow: 0 0 3px 0 rgba(0, 78, 255, .1);
	position: relative;
	display: block !important;
	;

}

.commentlist .item .accept {
	position: absolute;
	right: 3%;
	top: 45%;
}

.commentlist .item .business {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.commentlist .content {
	margin: 10px 0px;
	overflow: hidden;
}

.commentlist .content img {
	width: 100%;
	height: 100%;
}


.commentlist .item .business {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.commentlist .business .avatar {
	width: 2em;
	height: 2em;
	border-radius: 100%;
	overflow: hidden;
	margin-right: 10px;
	flex-shrink: 0;
}

.commentlist .business .avatar image {
	width: 100%;
	height: 100%;
}

.commentlist .business .base {
	width: 90%;
	padding: 5px 10px;
	font-size: .8em;
}

.commentlist .business .base .name {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.commentlist .business .base .name .nickname {
	font-weight: bold;
	color: #000;
}

.commentlist .business .base .name .createtime {
	color: #999;
}

.commentlist .business .base .desc {
	color: #999;
}

.commentlist .item .content {
	font-size: .9em;
	color: #303133;
	margin-bottom: 30px;
	width: 100%;
}


/* y */
.content {
	width: 100%;
	overflow-x: hidden;
}

.person {
	background-image: url("/static/titlebg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	padding: 30px 30px 10px;
}

.person .info {
	display: flex;
	width: 100%;
	margin-bottom: 15px;
}

.person .info .avatar {
	width: 4em;
	height: 4em;
	overflow: hidden;
	border-radius: 100%;
	margin-right: 1em;
	flex-shrink: 0;
}

.person .info .avatar image {
	width: 100%;
	height: 100%;
}

.person .info .base {
	color: #fff;
	font-size: 1em;
}

.person .info .base .nickname {
	margin-bottom: 7px;
}

.person .info .base .desc {
	font-size: .8em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/* 改成你需要的行数 */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.person .grid {
	margin-bottom: 15px;
}

.person .btnlist {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: nowrap;
}

.person .btnlist .btn {
	margin-right: 10px;
}





.nav {
	display: flex;
	background-color: #f1f6f9;
	position: relative;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.nav .nav-item {
	height: 110rpx;
	line-height: 110rpx;
	text-align: center;
	color: #666;
	font-size: 30rpx;
}

.nav .active {
	color: #000;
	font-weight: 600;
}

.nav .active-line {
	background-color: #038fff;
	width: 35rpx;
	height: 4rpx;
	position: absolute;
	top: 86rpx;
	transition: left 0.2s;
}

.list .item {
	display: flex;
	width: 100%;
	padding: 10px;
	margin: 0 auto;
}

.business {
	width: 20%;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 10px;
	margin-right: 10px;
}

.avatar {
	width: 100%;
	height: 5em;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.author {
	text-align: center;
	font-size: .8em;
	color: #999;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.info {
	font-size: .9em;
	color: #999;
}

.info .title,
.info .createtime,
.info .category,
.info .status,
.info .join {
	margin-bottom: 2px;
}

.info .title {
	font-size: 1.1em;
	width: 95%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000;
	text-decoration: underline;
	font-weight: bold;
}

.info .status {
	background: #fff8e5;
	color: #fa3534;
	padding: 1px 2px;
	border: 1px solid #fa3534;
	border-radius: 3px;
	margin-right: 5px;
}

.info .join {
	display: flex;
	align-items: center;
	align-content: center;
	color: #fa3534;
}

.count {
	margin-right: 10px;
}

.info .point {
	width: 4em;
	text-align: center;
	background: #fff8e5;
	color: #f19049;
	padding: 2px;
	margin-right: 10px;
}
</style>
